<template>
    <el-card class="my-exam">
      <div class="top" style="padding-right: 40px">
        <div class="left" style="float: left">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="试卷状态">
              <el-select v-model="searchForm.state" placeholder="请选择">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="right" style="float:right;">
          <el-form :inline="true" :model="form">
            <el-form-item label="邀请码">
              <el-input v-model="form.invitationCode" placeholder="请输入邀请码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addExam">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="100"

        >
        </el-table-column>
        <el-table-column
          prop="name"
          width="140"
          label="考试名称">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="endTime"
          width="180"
          label="结束时间">
        </el-table-column>
        <el-table-column
          prop="totalTime"
          width="180"
          label="总时长">
          <template slot-scope="scope">
            {{Math.floor(scope.row.duration / 3600)}}时{{Math.floor((scope.row.duration % 3600) / 60)}}分{{(scope.row.duration % 3600) % 60}}秒
          </template>
        </el-table-column>
        <el-table-column
          prop="totalTime"
          width="180"
          label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == '未开始' ? '' :
             (scope.row.status == '进行中' ? 'primary' : 'info')"
                    size="mini"
            >{{scope.row.status}}</el-tag>
            <template v-if="scope.row.submitType != null && (scope.row.status == '进行中' || scope.row.status == '已结束')">
              <el-tag
                :type="scope.row.submitType == '已提交' ? 'primary' : 'warning'"
                style="margin-left: 5px"
                size="mini"
              >{{scope.row.submitType}}</el-tag>
            </template>

          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button size="small"
                       @click="startExam(scope.row.id)"
                       type="primary"
                       v-if="scope.row.status == '未开始' || scope.row.status == '进行中'"
                       :disabled="scope.row.submitType == '已提交'"
            >
              开始</el-button>
            <el-button size="small" @click="lookExam(scope.row.id)" v-if="scope.row.submitType == '已提交'">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        form: {
          invitationCode: null,
          userId: null,
        },
        searchForm: {
          state: null,
        },
        options:['未开始','进行中', '已结束'],
        tableData:[],
        exams: null,
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
      ]),
    },
    created () {
      this.getExams();
    },
    watch: {
      searchForm:{
        handler: function (form) {
          this.tableData = this.exams[form.state];
        },
        deep: true,
      }
    },
    methods: {
      async addExam() {
        this.form.userId = this.userInfo.id;
        const { data: res } = await this.$http.post('exam/invitation',
          this.$qs.stringify(this.form));
        if (res.code == 200) {
          this.$message.warning(res.data.msg);
        } else {
          this.$message.success('添加成功');
          this.getExams();
        }
        this.form.invitationCode = null;
      },
      search() {
        let index = 0;
        this.tableData = [];
        this.exams.filter((item) => {
          if (item.status == this.searchForm.state) {
            this.tableData[index++] = item;
          }
        })
      },
      async getExams() {
        const userId = this.userInfo.id;
        const { data: res } = await this.$http.get('exam/list', {
          params: {
            userId,
          }
        });
        if (res.code == 200) {
          return
        }
        this.exams = res.data.exams;
        this.tableData = this.exams;
      },
      startExam(id) {
        this.$router.push('/exam?id=' + id);
      },
      lookExam(id) {
        const str = this.$qs.stringify({
          id: id,
          type: "readonly",
        })
        this.$router.push('/exam?' + str,);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-exam{
    width: 1200px;
  }
</style>
